<template>
	<div id="cart">
		<header class="cart_top">
			<van-icon name="arrow-left" size="0.3rem" class="quit" @click="$router.push('/home').catch(() =>{})" />
			<h1>购物车</h1> <span @click="setgoods()">{{set}}</span>
		</header>
		<p v-if="!goods" class="no_goods" @click="$router.push('/home').catch(() =>{})"> 你的购物车还没有商品,快去逛逛吧>>></p>
		<div class="goods" v-if="goods">
			<div class="good" v-for="item in goods" :key="item._id">
				<div class="bbii">
					<van-checkbox v-model="item.flag"></van-checkbox>
					<img :src="item.img" @click='$router.push(`/goodsdil/${item._id}`).catch(() =>{})'>
				</div>
				<aside>
					<h3>{{item.title}}</h3>
					<h4>{{item.des}}</h4>
					<p>￥{{item.price*item.num}}</p>
					<van-stepper class="butt" v-model="item.num" theme="round" button-size="22" disable-input
						@plus="upd(item.proid,1)" @minus="upd(item.proid,-1)" />
				</aside>
			</div>
			<van-submit-bar :price="allprice*100" button-text="提交订单" @submit="onSubmit">
				<van-checkbox v-model="checked">全选</van-checkbox>
				<span v-if="clear" class="clear">删除</span>
			</van-submit-bar>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'cart',
		data() {
			return {
				price: 0,
				value: 1,
				goods: this.$route.query.data.goods,
				checked: false,
				allprice: 0,
				clear:false,
				set:"编辑"
			}
		},
		computed: {


		},
		updated() {
			let t = this.$route.query.data.goods.every((val) => {
				return val.flag
			})
			if (t) {
				this.checked = true
			} else {
				this.checked = false
			}
			let sum = 0
			this.$route.query.data.goods.forEach((val) => {
				if (val.flag) {
					sum += val.num * val.price
				}
			})
			this.allprice = sum
		},
		methods: {
			onSubmit() {
				this.$toast("钱包维护中...")
			},
			upd(id, num) {
				this.$axios({
					url: "/cart/update",
					method: 'patch',
					params: {
						username: this.$route.query.data.username,
						goodid: id,
						num: num
					}
				}).then(res => {
					if (res.err === 0) {
						this.$toast("修改数量成功")
					} else {
						this.$toast("网络开小差了~再试一次吧")
					}
				})
			},
			setgoods(){
				if(this.set==="编辑"){
					this.set="完成"
					this.clear=true
				}else{
					this.set="编辑"
					this.clear=false
				}
			}
		},
	}
</script>

<style scoped>
	.cart_top {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 0.12rem 0.2rem;
		line-height: 0.65rem;
	}

	.cart_top .quit {
		margin-top: 0.2rem;
	}

	.cart_top h1 {
		text-align: center;
		line-height: 0.2rem;
		padding: 0.2rem;
		font-weight: 500;
	}

	.cart_top span {
		font-size: 0.24rem;
	}

	.no_goods {
		text-align: center;
		line-height: 8rem;
		padding-bottom: 2.5rem;
	}

	.goods {
		margin-bottom: 0.6rem;
		min-height: 9.5rem;
	}

	.good {
		width: 94vw;
		overflow: hidden;
		background-color: #fff;
		padding: 0.1rem;
		margin: 0.1rem;
		border-radius: 0.2rem;
	}

	.good img {
		width: 1.7rem;
		float: left;
		margin: 0.1rem 0.2rem;
	}

	.good aside h3 {
		margin-top: 0.1rem;
	}

	.good aside h4 {
		margin-bottom: 0.2rem;
	}

	.good aside span {
		line-height: 0.4rem;
	}

	.good aside p {
		float: left;
		line-height: 0.4rem;
		font-size: 0.35rem;
		color: #ec232b;
	}

	.good aside .butt {
		float: right;
	}

	.good .bbii {
		float: left;
		display: flex;
	}

	.clear {
		margin-left: 0.15rem;
		color: white;
		background-color: #ff0000;
		padding: 0.08rem;
		text-align: center;
		border-radius:0.2rem ;
	}
</style>
